<template>
    <div id="GoodsList">

        <div class="search_bar clearfix">
            <a href="index.html"><img src="../assets/images/logo.png" class="logo fl"></a>

            <div class="guest_cart fr">
                <a href="#/cart" class="cart_name fl">我的购物车</a>
                <div class="goods_count fl" id="show_count">1</div>
            </div>
        </div>

        <div class="navbar_con">
            <div class="navbar">
                <h1 class="fl">商品列表</h1>
                <ul class="navlist fl">
                    <li><a href="">首页</a></li>
                </ul>
            </div>
        </div>
        <div class="goods-list" v-for="i in list" :key="i.id">
        <div class="product-card">
            <div class="product-image">
                <img :src="serverApiUrl + i.imgurl" @click="todetail(i.id); addView(i.id)"> 
            </div>
            <div class="product-info">
            <h4><a @click="todetail(i.id); addView(i.id)">{{ i.name }}</a></h4>
            <p class="product-description">{{ i.description }}</p>
            <p class="product-price">¥ {{ i.price }}/{{ i.unit }}</p>
            </div>
        </div>
        </div>
        <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total"
            @current-change="changePage"></el-pagination>
    </div>
</template>
<script>
import { getProductByTypeApi } from '../api/GetProductByType'
import { serverApiUrl } from "../api/serverApiUrl"
import { addViewApi } from '../api/GetProductById'
import { addViewHistoryApi } from '../api/AddViewHistory'
export default {
    data() {
        return {
            typeId: '',
            list: [],
            serverApiUrl: serverApiUrl,
            pageSize: 5, //每页显示5条
            total: 0, //总条数
            pageNo: 1, //默认当前页码第1页
            name: "",
        }
    },
    methods: {
        changePage(val) {
            //val:改变页码当前的页码
            this.pageNo = val;
            this.getlist(); //根据新的页码选取分页数据
        },
        getParams() {
            this.typeId = this.$route.query.typeid;
            this.name = this.$route.query.name;
        },
        getlist() {
            getProductByTypeApi({
                "categoryId": this.typeId,
                "name": this.name,
                "pageNo": this.pageNo,
                "pageSize": this.pageSize,
            }).then(resp => {
                console.log(resp);
                this.list = resp.records;
                this.total = resp.total;
            })
        },
        todetail(id) {
            this.$router.push({
                path: '/detail',
                query: {
                    id: id
                }
            })
        },
        addView(id) {
            addViewApi({ "id": id });
            if (JSON.parse(window.sessionStorage.getItem("user")) != null) {
                addViewHistoryApi({
                    "productid": id,
                    "userid": JSON.parse(window.sessionStorage.getItem("user")).id,
                    "viewtime": new Date(),
                })
            }
        }
    },
    created() {

        this.getParams();
        this.getlist();
    }
}
</script>
<style scoped>
.goods-list {
  margin-bottom: 20px;
}

.product-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin-left: 10%;
}

.product-image {
  flex: 0 0 auto;
  margin-right: 20px;
}

.product-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
}

.product-info {
  flex: 1 1 auto;
}

.product-info h4 {
  margin: 0;
}

.product-description {
  color: #555555;
  margin-top: 10px;
  margin-bottom: 20px;
}

.product-price {
  color: #ff5555;
  font-weight: bold;
}

.el-pagination {
  text-align: right;
}
</style>